<template>
  <cu-custom bgColor="bg-yellow" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">账本管理</block>
  </cu-custom>
  <scroll-view scroll-y class="indexes" :style="[{height:'calc(78vh)'}]"
               :scroll-with-animation="true" :enable-back-to-top="true">

    <view class="cu-list menu sm-border card-menu padding-top">
      <view class="cu-item" v-for="(book,index) in exchangeBookList" :key="index"
            @tap="exchangeBookEdit('update', book)">
        <view class="content">
          <view class="text-grey">{{ book.bookName }}</view>
          <view class="text-gray text-sm flex">
            <view class="text-cut">
              <text class="text-gray  margin-right-xs">{{ book.bookDesc }}</text>
            </view>
          </view>
        </view>
        <view class="action">
          <switch @tap.stop="swatchDefaultBookFLag(book)" :class="book.defaultFlag == 1?'checked':''"
                  :checked="book.defaultFlag == 1?true:false"></switch>
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="padding flex flex-direction padding-bottom fixed bottom">
    <button class="cu-btn bg-yellow text-white margin-tb-sm" @tap="exchangeBookEdit('create')">新增账本</button>
  </view>

</template>

<script lang="ts" setup>
// 记事本列表
import {computed, onMounted, ref} from "vue";
import {useStore} from "../../common/store";
import {ExchangeBook} from "../../common/model/exchange";
import {bookList, updateDefaultExchangeBookStatus} from "../../common/api/exchange";

const store = useStore();

const hasLogin = computed(() => store.hasLogin)
const token = computed(() => store.token)
const userId = computed(() => store.userId)
const userName = computed(() => store.userName)
const avatarUrl = computed(() => store.avatarUrl)
const phone = computed(() => store.phone)
const version = ref('2.2')
const exchangeBookList = ref([] as Array<ExchangeBook>)
const privateFlag = ref(0)

const exchangeBookListData = () => {
  bookList({
    userId: store.userId,
    privateFlag: privateFlag.value
  }).then(res => {
    exchangeBookList.value = res;
  })
}

const swatchDefaultBookFLag = (e: ExchangeBook) => {
  e.defaultFlag = e.defaultFlag ==1 ? 0 : 1;
  updateDefaultExchangeBookStatus(e).then(res=>{
    uni.showToast({
      title: '更新账本状态成功！',
      icon: 'none',
      duration: 3000,
      success: function (res) {
        exchangeBookListData();
      }
    })
  }).catch(e => {
    uni.showToast({
      title: '更新账本状态失败！',
      icon: 'none',
      duration: 3000,
      success: function (res) {
        exchangeBookListData();
      }
    })
  })
  // exchangeBookData.value.defaultFlag = e.detail.value ? 1 : 0
}

const exchangeBookEdit = (type: string, book: ExchangeBook) => {
  uni.navigateTo({
    url: '/pages/user/ExchangeBooksEdit?type=' + type + "&book=" + encodeURIComponent(JSON.stringify(book)),
    success(result) {
    }
  });
}

onMounted(() => {
  exchangeBookListData();
})

</script>

<style scoped>

</style>